<template>
	<a-dropdown
		placement="topCenter"
		class="approval-person"
		@visibleChange="visibleChange"
	>
		<div class="ant-dropdown-title">
			<span class="low-code icona-shenpiren1"></span>
		</div>
		<template #overlay>
			<div class="over-person-wrapper" :style="dropOverStyle">
				<div class="person-wrapper-title">
					{{
						iTrans('pages.process.column.personWrapperTitle', '当前节点审批人')
					}}
				</div>

				<div v-if="loading" class="loading-class">
					<svg
						focusable="false"
						class="anticon-spin"
						data-icon="loading"
						width="20px"
						height="20px"
						fill="#4C78FC"
						aria-hidden="true"
						viewBox="0 0 1024 1024"
					>
						<path
							d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
						></path>
					</svg>
				</div>
				<template v-else>
					<div
						:class="{
							'person-wrapper-box': true,
							'person-wrapper-box-grid': personList.length > 2,
						}"
						v-if="personList.length"
					>
						<div
							v-for="item in personList"
							:key="item.employee_id"
							class="person-box"
						>
							<ok-person-cell
								width="22px"
								height="22px"
								.person-info="item"
							></ok-person-cell>
							<span class="person-name">{{ item.employee_name }}</span>
						</div>
					</div>
					<span class="nobody" v-else>{{ $t('pages.process.tip.noApprover', '暂无审批人') }}</span>
				</template>
			</div>
		</template>
	</a-dropdown>
</template>

<script setup lang="ts">
import { computed, ref, unref, onMounted, nextTick, defineProps } from 'vue'
import { i18n } from '@/locales'
import { apiInit } from '@/services'

const props = defineProps<{
	recordData: any
}>()

const { $t: iTrans } = i18n
const api = apiInit()

const personList = ref<any>([])
const dropOverStyle = ref<any>({})
const loading = ref<boolean>(true)

const getApprovalPerson = async () => {
	loading.value = true
	personList.value = []
	const res: any = await api.delegateAuto.GetForecastPrivateV3Ego_apiPOST({
		payload: { process_instance_id: props.recordData.process_instance_id },
	})
	if (res.code === '000000') {
		const sortArr: any = []
		res.data.todo &&
			res.data.todo.forEach((item: any) => {
				item.task_identity_users.forEach((item: any) => {
					if (!sortArr.includes(item.employee_id)) {
						sortArr.push(item.employee_id)
						personList.value.push(item)
					}
				})
			})
	}
	loading.value = false
	// 防止deopDown 闪烁
	setTimeout(() => {
		dropOverStyle.value = {
			opacity: 1,
		}
	}, 200)
}
const visibleChange = async (flag: boolean) => {
	if (flag) {
		getApprovalPerson()
	} else {
		dropOverStyle.value = {
			opacity: 0,
		}
	}
}
</script>
<style lang="less" scoped>
.ant-dropdown-title {
	&:hover {
		.icona-shenpiren1 {
			color: #4c78fc;
			// background: #4C78FC;
		}
	}
}
</style>
<style lang="less">
.over-person-wrapper {
	opacity: 0;
	background: #fff;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
	border-radius: 8px;
	min-width: 210px;
	max-width: 304px;
	min-height: 102px;
	max-height: 216px;
	overflow-y: auto;
	padding: 16px;
	.loading-class {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30px;
	}
	.person-wrapper-title {
		font-weight: 500;
		font-size: 14px;
		line-height: 14px;
		margin-bottom: 16px;
	}

	.person-wrapper-box {
		display: flex;
		grid-column-gap: 8px;
		flex-wrap: wrap;

		.person-box {
			background: #f2f4f7;
			padding: 4px;
			display: flex;
			align-items: center;
			border-radius: 24px;
			margin-bottom: 12px;
			margin-right: 8px;
			.person-name {
				margin: 0 6px;
			}
		}
	}
	.person-wrapper-box-grid {
		.person-box {
			margin-right: 0;
		}
	}
	.nobody {
		color: #B9B9B9;
	}
}
</style>
